<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <span>校区管理</span>
      </div>
      <div class="col-8 text-right">
        <el-button-group class="col">
          <el-button type="primary" @click="visible = true">添加机构</el-button>
        </el-button-group>
      </div>
      <a-drawer
        title="添加机构"
        placement="right"
        width="500"
        @close="visible = false"
        :visible="visible"
      >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="机构名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="所属地区">
            <el-cascader
              :options="address()"
              :props="{value:'label'}"
              v-model="selectedOptions"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="运营类型">
            <el-input v-model="ruleForm.type"></el-input>
          </el-form-item>
          <el-form-item label="机构地址">
            <el-input v-model="ruleForm.detailedaddress"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="ruleForm.phonenum"></el-input>
          </el-form-item>
          <el-form-item label="机构简称">
            <el-input v-model="ruleForm.info"></el-input>
          </el-form-item>
          <el-form-item label="机构描述">
            <el-input v-model="ruleForm.description"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          </el-form-item>
        </el-form>
      </a-drawer>
    </a-layout-header>
    <a-layout-content class="admin-content-table">
      <el-table
        :data="getschool.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        border
        height="100%"
        style="width: 100%;"
        v-loading="loading"
      >
        <el-table-column prop="ID" label="ID" width="100" sortable></el-table-column>
        <el-table-column prop="name" label="机构名称"></el-table-column>
        <el-table-column prop="addr" label="地址">
          <template slot-scope="scope">
            <span>{{scope.row.addr? scope.row.addr.province: " "}} &nbsp;</span>
            <span>{{scope.row.addr ?scope.row.addr.city: " "}} &nbsp;</span>
            <span>{{scope.row.addr ? scope.row.addr.area: " "}} &nbsp;</span>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="创建时间"></el-table-column>
        <!-- <el-table-column prop="deleted" label="是否停用">
            <template slot-scope="scope">{{scope.row.deleted?'是':'否'}}</template>
        </el-table-column>-->
        <el-table-column prop="username" label="负责人"></el-table-column>
        <el-table-column prop="phonenum" label="联系电话"></el-table-column>
        <el-table-column fixed="right" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <router-link
              :to="{ name:'学校内容', params: { ID: scope.row.ID } }"
              class="btn btn-sm btn-info"
            >查看</router-link>&nbsp;
            <el-button
              size="mini"
              type="danger"
              @click="del(scope.row.ID, !!scope.row.deleted)"
            >{{scope.row.deleted?'启用':'停用'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
    <adminContentFooter
      v-bind="{handleSizeChange, handleCurrentChange, currentPage, pagesize,data: getschool}"
    ></adminContentFooter>
  </a-layout>
</template>

<script>
import { asynccreatschool, asyncdelschool } from "../../../plugins/api.js";
import { mapGetters } from "vuex";
import adminContentFooter from "@/components/admin/admin-content-footer.vue";
// import qrcode from "qrcode";
export default {
  name: "school_list",
  data() {
    return {
      visible: false,
      loading: false,
      pagesize: 10,
      currentPage: 1,
      updatefrom: { uid: "", ID: "" },
      ruleForm: {
        name: "",
        addr: {},
        type: "",
        detailedaddress: "",
        username: "",
        info: "",
        description: "",
        phonenum: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 3, max: 32, message: "长度在 3 到 32 个字符", trigger: "blur" }
        ]
      },
      getoption: [],
      Selectionoption: [],
      selectedOptions: [],
      x123: ""
    };
  },
  async mounted() {},
  computed: {
    ...mapGetters("school", ["getschool"])
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    address() {
      const address = window.address || [];
      return address;
    },
    handleChange() {
      const data = {
        province: this.selectedOptions[0],
        city: this.selectedOptions[1],
        area: this.selectedOptions[2]
      };
      this.ruleForm.addr = data;
    },
    remoteMethod(query) {
      if (query !== "") {
        this.getoption = this.getUser.filter(item => {
          if (item.phonenum) {
            return item.phonenum.toString().indexOf(query) > -1;
          } else {
            return false;
          }
        });
      } else {
        this.options = [];
      }
    },

    async del(ID, isdel) {
      this.$confirm("此操作将停用该校区, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          try {
            await asyncdelschool({ ID, isdel });
            this.$message.success("修改成功");
            this.$store.dispatch("school/actionschool");
          } catch (err) {
            this.$message.error("失败成功");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          try {
            await asynccreatschool(this.ruleForm);
            this.visible = false;
            this.$message.success("创建成功");
            this.$store.dispatch("school/actionschool");
          } catch (err) {
            this.$message.error("添加失败");
          }
        }
      });
    }
  },
  components: {
    adminContentFooter
  }
};
</script>

<style scoped>
.row {
  padding-top: 15px;
}

.el-button-group > .el-button:first-child:last-child {
  float: right;
}

#app .admin-ant-layout .admin-content-footer {
  margin-top: 16px;
  margin-left: -20;
}
#app .admin-ant-layout .admin-content-header {
  margin: 0;
}
.list .btn-info {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
</style>
